<template>
  <div class="Integrated_Monitoring_TJ">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px':'top: 100px;padding:10px'"
          v-loading="isLoading"
        >
          <el-row v-if="false">
            <el-col :span="21">
              <span>历史调用总次数：</span>
              <span style="color:#33ccff;font-size:24px;">195434</span>
            </el-col>
            <el-col :span="3">
              <span>统计时间截止至</span>
              <span>2021-11-17</span>
            </el-col>
          </el-row>
          <el-row style="margin-top:15px">
            <el-col :span="18">
              <el-button
                size="mini"
                @click="data_change(3)"
                :type="btn_type=='date'?'primary':''"
              >日</el-button>
              <el-button
                size="mini"
                @click="data_change(2)"
                :type="btn_type=='month'?'primary':''"
              >月</el-button>
              <el-button
                size="mini"
                @click="data_change(1)"
                :type="btn_type=='year'?'primary':''"
              >年</el-button>
              <el-date-picker
                v-model="value1"
                :type="btn_type"
                :placeholder="picker_title"
                style="margin-left:30px"
                size="mini"
                @change="time_change"
              >
              </el-date-picker>
              <!-- 下拉选框 -->
              <el-select
                filterable
                v-model="Statistical_val"
                placeholder="请选择项目"
                style="margin-left:20px"
                size="mini"
              >
                <el-option
                  v-for="item in Statistical_list"
                  :key="item.projectId"
                  :label="item.projectName"
                  :value="item.projectName"
                  @click.native="options_click(item)"
                >
                </el-option>
              </el-select>
              <!-- 搜索按钮 -->
              <el-button
                size="mini"
                icon="el-icon-search"
                @click="data_search"
                style="margin-left:20px"
              ></el-button>
            </el-col>
            <el-col :span="6">

            </el-col>
          </el-row>
          <h3 style="text-align:center">服务调用趋势图</h3>
          <div id="myChart_a"></div>

          <h3 style="text-align:center">&nbsp</h3>
          <el-row>
            <el-col :span="10">
              <div id="myChart_b"></div>
            </el-col>
            <el-col :span="12">
              <div id="myChart_c"></div>
            </el-col>
          </el-row>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      value1: '',
      radio: 3,
      btn_type: 'date',
      picker_title: '请选择日',
      Statistical_val: '',
      Statistical_list: [],
      searchData: {},//获取数据检索条件/项目数据
      searchData_arr: [],//获取数据检索条件/项目数据
      dateTimeType: {},//获取数据检索条件/时间
      isLoading: false,
      Chart: [],//折线图
      List: [],//柱状图
      isId: null,// 柱状图id
      arr_time: [], // 折线图时间数组

    };
  },
  methods: {
    drawLine_a () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_a'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['接收计数', '接收错误计数', '发送计数', '发送错误计数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.arr_time
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '接收计数',
            type: 'line',
            stack: 'Total',
            data: this.Chart[0]
          },
          {
            name: '接收错误计数',
            type: 'line',
            stack: 'Total',
            data: this.Chart[1]
          },
          {
            name: '发送计数',
            type: 'line',
            stack: 'Total',
            data: this.Chart[2]
          },
          {
            name: '发送错误计数',
            type: 'line',
            stack: 'Total',
            data: this.Chart[3]
          }
        ]
      });
    },
    drawLine_b () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_b'))
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['接收计数', '接收异常计数', '发送计数', '发送异常计数']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.List,
            type: 'bar'
          }
        ]
      });
    },
    drawLine_c () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_c'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.List[0], name: '接收计数' },
              { value: this.List[1], name: '接收异常计数' },
              { value: this.List[2], name: '发送计数' },
              { value: this.List[3], name: '发送异常计数' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    data_change (data) {//日期切换事件
      this.value1 = ''
      if (data == 1) {
        // 年
        this.btn_type = 'year'
        this.picker_title = "请选择年"
      }
      if (data == 2) {
        // 月
        this.btn_type = 'month'
        this.picker_title = "请选择月"
      }
      if (data == 3) {
        // 日
        this.btn_type = 'date'
        this.picker_title = "请选择日"
      }
    },
    getStatistical_list () {//获取下拉选框数据
      this.$get("/Monitor/Statistical/Type").then(res => {
        if (res.code == 0) {
          this.Statistical_list = res.data
        }
      })
    },
    time_change () {//时间选择事件
      let time = this.dateFormat(this.value1)
      let date = this.btn_type == 'date' ? 'DAY' : this.btn_type.toUpperCase()
      let dateTimeType = {
        dateTimeType: date,
        reportDateTime: time
      }
      this.dateTimeType = dateTimeType
    },
    options_click (val) {//下拉选项点击事件
      console.log(val);
      let arr = [
        val
      ]
      this.searchData = val
      this.searchData_arr = arr
    },
    data_search () {//搜索点击事件
      this.Chart = []
      this.List = []
      this.arr_time = []
      if (this.value1 && this.Statistical_val) {
        this.isLoading = true
        let body = {
          // MonitorStatisticSearch: this.dateTimeType,
          searchData: this.searchData,
          dateTimeType: this.dateTimeType.dateTimeType,
          reportDateTime: this.dateTimeType.reportDateTime
        }
        let body_arr = {
          // MonitorStatisticSearch: this.dateTimeType,
          searchData: this.searchData_arr,
          dateTimeType: this.dateTimeType.dateTimeType,
          reportDateTime: this.dateTimeType.reportDateTime
        }
        this.$post("/Monitor/Statistical/Chart", body).then(res => {
          if (res.code == 0) {
            // console.log(res);
            // this.Chart = res.data.primary
            for (var i in res.data.primary) {
              let arr = res.data.primary[i]
              var arr_i = []
              var arr_time = []
              for (var j in arr) {
                arr_i.push(arr[j].value)
                arr_time.push(this.dateFormat(arr[j].timestamp))
              }
              this.Chart.push(arr_i)
            }
            console.log(this.Chart);
            this.arr_time = arr_time
            this.drawLine_a();
          }
        }).catch(err => {
          this.$message.error(res.msg);
        }).then(() => {
          this.$post("/Monitor/Statistical/List", body_arr).then(res => {
            if (res.code == 0) {
              this.isId = body_arr.searchData[0].projectId
              // console.log(res);
              let id = this.isId
              var arr = res.data.primary[id]
              // var arr = JSON.stringify(res.data.primary, [id])
              // console.log(arr);
              for (var i in arr) {
                let newArr = arr[i]
                for (var j in newArr) {
                  this.List.push(newArr[j])
                }
              }
              this.drawLine_b();
              this.drawLine_c();
              this.isLoading = false
            }
          }).catch(err => {
            this.$message.error(res.msg);
          })
        })

      } else {
        this.$message({
          message: '请选择日期/项目！',
          type: 'warning'
        });
      }
    },
    dateFormat (val) {//时间过滤方法
      if (val == null || val == '') {
        return ''
      } else {
        let d = new Date(val) // val 为表格内取到的后台时间
        let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
        let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
        let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
        let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
        let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
        let times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec
        return times
      }
    },
    init_page () {// 页面初始化方法
      this.value1 = new Date()
      console.log(this.Statistical_list);
      this.$get("/Monitor/Statistical/Type").then(res => {
        if (res.code == 0) {
          console.log(res.data);
          let val = res.data[0]
          let arr = [
            val
          ]
          this.time_change()
          this.searchData = val
          this.searchData_arr = arr
          this.Statistical_val = val.projectName
          this.data_search()
        }
      })
    }
  },
  mounted () {
    // document.getElementById("2").focus();
    this.init_page()
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
    this.isLoading = true
    this.getStatistical_list()

  }
};
</script>
<style lang="scss">
.Integrated_Monitoring_TJ {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  #myChart_a,
  #myChart_b,
  #myChart_c {
    height: 300px;
    // background-color: #ccc;
  }
}
</style>
